//$base-color: #58595B;
$base-color: white;
$active-color: white;
$base-gradient: 'gradient';
$tabs-dark: #58595B;
$tabs-light: #000;
$tabs-bar-gradient: 'gradient';
$list-header-bg-color: #58595B;
@import 'sencha-touch/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
//@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;

body {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    line-height:1.5;
    word-wrap: break-word;
    -webkit-text-size-adjust: none;
background-color: grey;
}

.x-list-header
{
   color: white !important;
   border-left: 0.8em solid #f0a03e; 
}

.x-list-normal .x-list-header {
	font-size: 0.7em;        
}

.x-list .x-list-item .x-list-item-label {
	padding: 0px;
}

.x-list-normal .x-list-item .x-list-item-label {
	border-top: 0px solid #dedede;
}

.x-list-normal .x-list-header {
	border-top: 0px solid #58595b;
	border-bottom: 0px solid #262627;
}

.x-tabbar.x-docked-top .x-button-label, .x-tabbar.x-docked-top .x-hasbadge .x-badge, .x-hasbadge .x-tabbar.x-docked-top .x-badge {
	font-size: .5em;
}

.x-title {
	font-size: 0.7em;
}

.x-tabbar.x-docked-top .x-tab {
	padding: 0.4em 0.5em;
}

.x-toolbar .x-button .x-button-label, .x-toolbar .x-button .x-hasbadge .x-badge, .x-hasbadge .x-toolbar .x-button .x-badge {
	font-size: .5em;
}

.x-toolbar-light {
	background-color: #58595B;
}

//eResource Styling
.wrapper{
    height: 100%;
    padding: 0.9em 0.8em;
}

.imageWrapper{
    display: inline-block;
    width: 20%;
    max-width: 20%;
    text-align: center;
    padding: 5px 5px 5px 5px;
    margin-right:0.8em;
    //margin-left: 5%;
    vertical-align: top;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}


.contentWrapper{
    display: inline-block;
    padding: 10px 10px 5px 10px;
    width: 75%;
    max-width: 75%;
    border-left: 0.6em solid #f0a03e;
}

.titleHeader{
    font-weight:bold;
    padding: 0px 5px 10px 5px;
    border-bottom: 1px dashed black;
}

.contentDescription{
    padding: 5px 5px 5px 5px;
    text-justify:inter-word;
}

.urlWrapper{
    text-align: right;
    margin-top: 5px;
}

.urlContainer{
    display: inline-block;
    padding: 5px 5px 0px 5px;
    text-align: center;
}

#urlBtn{
    background: #f0a03e;
    padding: 0.5em 0.6em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    //color: white;
    font-size: 0.5em;
    text-decoration: none;
    vertical-align: middle;
    margin: 10px 0px 10px 10px
}

h1{
    font-weight:bold;
    font-size: 0.7em;
}

h2{
    font-size: 0.6em;
}

//opening hours Styling
.opMainPanel{
    width: 98%;
    max-width: 100%;
    margin: 0.7em auto;
    padding: 0.65em;
    background-color: white;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

.ohHeader{
    font-weight:bold;
    padding: 0px 5px 10px 5px;
    border-bottom: 1px solid black;
}